<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#d1 {

				width: 500px;
				height: 600px;
				position: relative;

			}

			#d1 ul li button {

				border-radius: 50%;
				margin: 5px;
				width: 20px;
				height: 20px;
				
				color: black;


				border: none;





			}

			#d1 ul {
				display: flex;
				position: absolute;
				left: 200px;
				top: 250px;

			}

			#d1>ul>li>button:hover {
				border: 2px solid #c5d8aa;
				cursor: pointer;
				background-color: white;
			}
		</style>
		<script>
			window.onload = function() {
				var img = document.getElementById("img1");
				var button1 = document.getElementById("t1").children;
				document.getElementById("")
				var imgArr = ["../day8/img/1.jpg", "../day8/img/2.jpg", "../day8/img/3.jpg", "../day8/img/4.jpg",
					"../day8/img/5.jpg"
				];
				var timer;
				var index = 0;
				timer = setInterval(function() {

					img.src = imgArr[index];
					// button1[index].style.backgroundColor = "white";
					// button1[index].style.width = "20px";
					// button1[index].style.height = "20px";
					// button1[index].style.backgroundRadius = "50%";
					// button1[index].style.opacity = "0.8";
					// button1[index].style.border = "3px solid gray";
					index++;
					if (index >= imgArr.length) {
						index = 0;
						
					};

				}, 1000);
				img.onmouseover = function() {
					//event=event||window.event;
					clearInterval(timer);
				}
				img.onmouseout = function() {
					timer = setInterval(function() {
						img.src = imgArr[index];
						index++;
						if (index >= imgArr.length) {
							index = 0;
						};
					}, 1000);
				}


			}
		</script>
	</head>
	<body>

		<div id="d1">
			<img id="img1" src="" />
			<ul type="none" id="t1">
				<li><button id="b1"></button></li>
				<li><button id="b2"></button></li>
				<li><button id="b3"></button></li>
				<li><button id="b4"></button></li>
				<li><button id="b5"></button></li>
			</ul>
		</div>
	</body>
</html>
